<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.demo1{
				border-radius: 50%;
				line-height: 200px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="demo1" style="width: 200px;height: 200px;background-color: pink;">我是测试文字</div>
		<div class="demo2"></div>
		<script>
			/* 
			 操作标签样式：
				获取样式：获取样式时，只会读取标签的内联样式
				设置样式：设置样式时，也是设置在内联样式里
			 */
			// 获取标签
			var demo1 = document.querySelector(".demo1")
			var demo2 = document.querySelector(".demo2")
			
			// 获取标签的样式
			var w = demo1.style.width
			var h = demo1.style.height
			var bg = demo1.style.backgroundColor
			console.log(w)
			console.log(h)
			console.log(bg)
			
			// 设置样式
			demo2.style.width = w
			demo2.style.height = h
			demo2.style.backgroundColor = bg
		</script>
	</body>
</html>
